<template>
	<div class="bigDiv">
		<el-form :inline="true" label-width="120px">
			<div class="topNav">
				<el-button type="text" icon="el-icon-search" size="small" @click="getList" style="float:right;">搜索</el-button>
				<el-button type="text" size="small" @click="importHandle">导出excel</el-button>
			</div>
			<el-form-item label="查询时间" prop="time">
				<el-date-picker v-model="timeModel" type="monthrange" range-separator="至" start-placeholder="开始月份"
					end-placeholder="结束月份" value-format='yyyy-MM-dd hh:mm:ss'>
				</el-date-picker>
			</el-form-item>

			<el-form-item label="排序方式">
				<el-select size="small" v-model="queryParams.orderClass" placeholder="请选择一个排序方式" filterable clearable>
					<el-option v-for="item in sortType" :key="item.id" :label="item.label" :value="item.value"
						@change="changeClass">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="商品类别">
				<el-select size="small" v-model="queryParams.category" placeholder="请选择商品类别" filterable clearable>
					<el-option v-for="item in goodsClassList"  :label="item.category" :value="item.category"
						>
					</el-option>
				</el-select>
			</el-form-item>
		</el-form>
		<el-table :data="list" border :cell-style="{padding: '17px 0px'}" height="calc(100vh  - 350px)">
			<el-table-column label="商品类别" align="center" prop="goodsClass"></el-table-column>
			<el-table-column label="销售额" align="center" prop="sumBudget"></el-table-column>
			<el-table-column label="数量" align="center" prop="num"></el-table-column>
			<el-table-column label="时间" align="center" prop="timeMonth"></el-table-column>
		</el-table>
		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize" @pagination="getList" />
	</div>
</template>

<script>
	import {
		wyy,
		goodsClassList,
		getClassListExport
	} from "@/api/leader/leaderapi";
	export default {
		name: "",
		// 页面数据
		data() {
			return {
				queryParams: {
					pageNum: 1, // 显示第一页数据
					pageSize: 10, //每页显示十条
					beginTime: "",
					endTime: "",
					orderClass: "",
					category:""
				},
				sortType: [{
					value: "num",
					label: "按销量排序"
				}, {
					value: "sumBudget",
					label: "按销售额排序"
				}],
				list: [],
				total: 0, // 一共多少条数据
				timeModel: [],
				goodsClassList: []
			};
		},
		// 初始化
		mounted() {
			this.getList();
			this.getGoodsClassList()
			console.log('77',this.goodsClassList)
		},
		// 函数集合
		methods: {
			getList() {
				console.log('82',this.orderClass)
				//传入订单详情和分页数据
				if (this.timeModel == null || this.timeModel.length == 0) {
					this.queryParams.beginTime = ""
					this.queryParams.endTime = ""
				} else {
					this.queryParams.beginTime = this.timeModel[0]
					this.queryParams.endTime = this.timeModel[1]
				}

				let params = {
                    category: this.queryParams.category,
					pageNum: this.queryParams.pageNum,
					pageSize: this.queryParams.pageSize,
					orderClass: this.queryParams.orderClass,
					beginTime: this.queryParams.beginTime,
					endTime: this.queryParams.endTime,
				};
				console.log('87', params.orderClass)
				console.log('111', this.timeModel)
				wyy(params).then(res => {
					this.list = res.rows
					this.total = res.total
				})
			},
        getGoodsClassList(){
			goodsClassList().then(res => {
				this.goodsClassList = res
			})
		},
		// 保存下载文件
		saveAs(blob, filename) {
			if (window.navigator.msSaveOrOpenBlob) {
		 	navigator.msSaveBlob(blob, filename)
			} else {
				const link = document.createElement('a')
				const body = document.querySelector('body')
				link.href = window.URL.createObjectURL(blob)
		 	link.download = filename
		  link.style.display = 'none'
		  body.appendChild(link)
				link.click()
				body.removeChild(link)
				window.URL.revokeObjectURL(link.href)
			}
		},
		// 导出订单
		importHandle() {
			if (this.timeModel) {
				this.queryParams.beginTime = this.timeModel[0]
				this.queryParams.endTime = this.timeModel[1]
			}
			let newSearch = {
				beginTime: this.queryParams.beginTime ?this.queryParams.beginTime : '',
				endTime: this.queryParams.endTime ? this.queryParams.endTime : '',
				orderClass: this.queryParams.orderClass ? this.queryParams.orderClass : '',
				category: this.queryParams.category ? this.queryParams.category : ''
			}
			getClassListExport(newSearch).then((res) => {
				let blob = new Blob([res], {
					type: 'application/vnd.ms-excel'
				})
				this.saveAs(blob, '商品分类销售列表.xls')
			})
		},
			changeClass() {
				console.log('96', this.queryParams.orderClass)
			}

		}
	}
</script>

<style>
</style>
